<template>
  <div class="card edit-field">
    <div class="card-body">
      <label for="edit-post" class="form-label">编辑帖子</label>
      <textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea>
      <button @click="post_a_post" type="button" class="btn btn-primary btn-sm">发帖</button>
    </div>
  </div>
</template>


<script>
import { ref } from 'vue';
import $ from 'jquery';
import {useRoute} from "vue-router/dist/vue-router";

export default {
    name: "UserProfileWrite",
    setup(props, context) {
        let content = ref('');
        const route = useRoute();
        const userId = parseInt(route.params.userId);
        const userName = localStorage.getItem("login_user_username")
        const Image = localStorage.getItem("login_user_photo")
      // console.log(localStorage)
      const post_a_post = () => {
        context.emit('post_a_post', content.value);

          $.ajax({
            url: "/api/posts", // 服务器 URL
            type: "POST", // 请求方法
            data: {
              user_id: userId,
              content: content.value,
              username: userName,
              photo: Image,
            },

            success(resp) {
              content.value = "";
              // 当请求成功时，处理服务器响应
              // ...
              location.reload();
              console.log("Post has been added successfully: ", resp);
            }
          });

        };

        return {
            content,
            post_a_post,
        }
    }
}
</script>


<style scoped>
.edit-field {
    margin-top: 20px;
}

button {
    margin-top: 10px;
}
</style>